/*Loader*/
#loader{
    width:50px;
    height:50px;
    border:5px solid #ccc;
    border-top-color:dodgerblue;
    border-radius:100%;
    /*Center*/
    position:fixed;
    left:0;
    right:0;
    top:0;
    bottom:0;
    margin:auto;
    /*girar*/
    animation: round 2s linear infinite;   
    z-index:1000;
}

/*backgroun loader*/
#back-loader {
    padding: 100%;
    background-color: rgba(0,0,0,0.4);
    position: fixed;
    z-index: 999;
    width: 100%;
    height: 100%;
}
/*keyframe*/
@keyframes round {
    from{transform:rotate(0deg)}
    to{transform:rotate(360deg)}
}

/*Contenedores*/
.cont-blue {
    width: 100%;
    background-color: #e6edf4;
    display: flex;
    height: 450px;
}

.cont-white {
    width: 100%;
    background-color: white;
    display: flex;
    height: 450px;
}

.cont-center {
    display: flex;
    align-items: center;
}

.cont-column {
    flex-direction: column;
}

.cont-left {
    width: 100%;
    max-width: 950px;
}

.cont-right {
    max-width: 950.703px;
    width: 100%;
}

.cont-full {
    width: 100%;
    position: relative;
}

.cont-paralx {
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    background-color: #e6edf4;
    display: flex;
    height: 450px;
}

.cont-skew-right {
    transform: skewX(-25deg);
    width: 100%;
    /* max-width: 950px; */
    margin-left: -106px;
}

.cont-skew-left {
    transform: skewX(-25deg);
    /* max-width: 950.703px; */
    width: 100%;
    margin-right: -106px;
}

.cont-skew-txt {
    transform: skewX(25deg);
    margin: 0% 0.2%;
}

.cont-pic-zoom {
    width: 100%;
    overflow: hidden;
    position: relative;
}

.cont-flx {
    position: relative;
    display: flex;
    width: 100%;
    justify-content: center;
}

.cont-dvs {
    width: 20%;
}

.cont-contain {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
    max-width: 380.59px;
}

.cont-txt {
    max-height: 450px;
    min-height: 300px;
}

.cont-shadown {
    z-index: 1;
    box-shadow: 7px 5px 23px grey;
}

.cont-img {
    max-height: 450px;
    height: 80%;
    width: 80%;
}

.cont-mult-img {
    width: 100%;
    height: 100%;
    flex-direction: row;
}

    .cont-mult-img div {
        width: 25%;
        height: 350px;
        margin: 0% 2% 0% 2%;
        box-shadow: black 0px 0px 35px;
    }

        .cont-mult-img div div {
            /*img-banner margin "proyectos y asesoria"*/
            margin: 0;
        }

.cont-fa-inf {
    min-width: 1190.000px;
    max-width: 1314.574px;
    height: 100%;
}

.cont-div-inf {
    flex-direction: row;
}
    .cont-div-inf > div {
        height: 700px;
        width: 50%;
    }

.cont-div-inf-col {
    flex-direction: column;
}
    .cont-div-inf-col > div {
        width: 100%;
        height: 300px;
    }




/*Estilos seccion 5 pagina auditoria*/
.cont-div-inf > .cont-pic-zoom {
    height: 100%;
    width: 33.33%;
}

    .cont-div-inf > .cont-pic-zoom > .cont-contain > .cont-hid:hover {
        background-color: unset;
        box-shadow:unset;
    }

    .cont-div-inf > .cont-pic-zoom > .cont-contain > .cont-hid > div {
        text-align: center;
    }

.cont-flow-dir {
    flex-flow: row;
}



.cont-fst {
}

.cont-in-3l {
    background-color: dodgerblue;
    background-repeat: no-repeat;
    background-size: cover;
    z-index: 2;
    box-shadow: 12px 4px 23px grey;
    width: calc(40% + 106px);
}

.cont-in-3r {
    background-color: white;
    background-repeat: no-repeat;
    background-size: cover;
    z-index: 1;
    width: calc(60% + 106px);
}

    .cont-in-3r div .cont-flx .cont-dvs {
        width: 40%;
        margin: 0 1.5%;
        padding: 0 5%;
    }

/*effectos contenedores*/
.cont-hid p {
    opacity: 0;
    transition: all 0.5s ease;
    transform: translateY(-38%);
}

.cont-hid:hover p {
    opacity: 1;
    transform: translateY(0%);
    /*color:white;*/
}

.cont-hid h2 {
    transform: translateY(100%);
    transition: all 0.5s ease;
}

.cont-hid:hover h2 {
    transform: translateY(0%);
    cursor: pointer;
    /*color:white;*/
}

.cont-hid {
    transition: all 0.5s ease;
}

    .cont-hid:hover {
        cursor: pointer;
        box-shadow: 1px 4px 22px grey;
        background-color: #ddeeff;
    }

.cont-card-hid{
    position:relative;
}

.cont-card-hid p {
    opacity: 0;
    transition: all 0.5s ease;
    position:absolute;
    top:100%;
    /*transform: translateY(415%);*/
}

    .cont-card-hid:hover p {
        opacity: 1;
        transition: all 0.5s ease;
        top: 50%;
        /*transform: translateY(0%);*/
    }

    .cont-card-hid h2 {
        opacity: 1;
        transition: all 0.5s ease;
        position: absolute;
        top:80%;
        /*transform: translateY(600%);*/
    }

    .cont-card-hid:hover h2 {
        opacity: 1;
        transition: all 0.5s ease;
        top: 35%;
        /*transform: translateY(0%);*/
    }

.cont-pic-zoom:hover .zoom {
    transform: scale(1.2);
    transition: all 0.5s ease;
}

/*Texto*/
.txt-on-img {
    padding: 2% 3%;
    color: #fff;
    text-align: left;
}

.txt-size-norm {
    font-size: 20px;
}

.txt-side-img {
    margin: 0 10% 0 10%;
    padding: 5% 10% 5% 10%;
}

.txt-img-title {
    font-size: 26px;
    color: white;
    text-shadow: 2px 2px 3px black;
}

.txt-img-quote {
    font-size: 20px;
    color: white;
    text-shadow: 2px 2px 3px black;
}

.txt-title {
    font-weight: 600;
    font-size:26px;
}

.txt-img-banner {
    position: absolute;
    top: 0;
    width: 100%;
    max-width: 950px;
    background-color: rgba(0, 0, 0, 0.60);
}

.txt-ali-center {
    text-align: center;
}

.txt-pic-5r /*INDEX*/ {
    color: white;
    z-index: 1;
    align-items: center;
    overflow: hidden;
}

    .txt-pic-5r p /*INDEX*/ {
        text-align: center;
    }


/*imagenes*/
.img-left {
    width: 100%;
    max-width: 950px;
    max-height: 450px;
}

.img-prod {
    width: 100%;
    max-width: 250px;
    max-height: 150px;
}

.background-img {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    position: relative;
    transition: all 0.5s ease;
}

.img-banner {
    height: 100%;
    max-height: 127px;
    background-color: black;
    opacity: 0.5;
    width: 100%;
    max-width: 950px;
    position: absolute;
    top: 0;
}

.cont-full .img-banner {
    height: 100%;
    max-height: 450px;
    background-color: black;
    opacity: 0.5;
    width: 100%;
    position: absolute;
    top: 0;
    max-width: none;
}
/*.zoom:hover {
    
}*/


/*Botones*/

/*listas*/
.list-inf {
    list-style-image: url(img/ok.png);
    text-align: left;
}

/*icons*/
.icon-circle {
    width: 100px;
    height: 100px;
    border-radius: 50px;
    background-color: dodgerblue;
    margin: 0% 2.5%;
}

.icon-img {
    width: 60px;
    margin-top: 20px;
    margin-bottom: 20px;
    filter: invert(1);
}

.icon-cont-x {
    position: relative;
    display: flex;
    align-items: center;
    max-width: 937px;
    width: 100%;
    justify-content: center;
}

.icon-cont-y {
}

/*Tablas*/
.tbl_detail_1c {
    height: 100%;
    width: 100%;
}

    .tbl_detail_1c td {
        text-align: center;
        border-bottom: 1px solid #ddd;
        font-size: 19px;
    }

    .tbl_detail_1c tbody tr:last-child td {
        border-bottom: none;
    }
/*estilos unicos*/
.cont-flx .cont-full .cont-flx .cont-dvs { /*Estilos imagenes seccion 5 index*/
    width: 50%;
    background-size: cover;
    min-height: 333px;
}

.cont-block-inv .cont-left .cont-shadown { /*Estilos imagenes seccion 6 (IMAGENES) index*/
    max-width: 800px;
    margin: 0 75px;
    z-index: 1;
    box-shadow: 7px 5px 23px grey;
}

#cont-audit-l {
    width: 40%;
    height: 450px;
}

#cont-audit-r {
    width: 60%;
    height: 450px;
}

    #cont-audit-r > div > div > div {
        width: 100%;
        background: #57acff
    }

    #cont-audit-r .icon-circle {
        background-color: #57acff;
    }

    #cont-audit-r > div > div > div:hover {
        background-color: #86c3ff;
        cursor: pointer;
    }

        #cont-audit-r > div > div > div:hover .icon-circle {
            background-color: #86c3ff;
        }

div#col {
    display: flex;
    flex-flow: row;
}

/*======== Responsive Design ===========*/
@media only screen and (max-width:1011px ) {
    .cont-blue {
        width: 100%;
        height: auto;
        background-color: #e6edf4;
        display: flex;
        flex-direction: column;
    }

    .cont-white {
        width: 100%;
        height: auto;
        background-color: white;
        display: flex;
        flex-direction: column;
    }

    .cont-block-inv {
        flex-direction: column-reverse;
    }

    .cont-center {
        display: flex;
        align-items: center;
    }

    .cont-column {
        flex-direction: column;
    }

    .cont-left {
        width: 100%;
        max-width: none;
    }

    .cont-right {
        width: 100%;
        max-width: none;
    }

    .cont-full {
        width: 100%;
        position: relative;
    }

    .cont-paralx {
        background-attachment: fixed;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        width: 100%;
        background-color: #e6edf4;
        display: flex;
        height: 350px;
    }

    .cont-skew-right {
        transform: skewX(0deg);
        width: 100%;
        /* max-width: 950px; */
        margin-left: 0px;
    }

    .cont-skew-left {
        transform: skewX(0deg);
        /* max-width: 950.703px; */
        width: 100%;
        margin-right: 0px;
    }

    .cont-skew-txt {
        transform: skewX(0deg);
        margin: 0% 0.2%;
    }


    /*Texto*/
    .txt-on-img {
        padding: 2% 3%;
        color: #fff;
        text-align: center;
    }

    .txt-size-norm {
        font-size: 20px;
    }

    .txt-side-img {
        margin: 0 10% 0 10%;
        padding: 5% 10% 5% 10%;
        text-align: justify;
    }

    .txt-img-title {
        font-size: 26px;
        color: white;
        text-shadow: 2px 2px 3px black;
        text-align: center
    }

    .txt-img-quote {
        font-size: 20px;
        color: white;
        text-shadow: 2px 2px 3px black;
        text-align: center;
    }

    .txt-title {
        font-weight: 600;
        padding: 0 10%;
        text-align: center;
        font-size: 26px;
    }

    .txt-img-banner {
        position: absolute;
        top: 0;
        width: 100%;
        max-width: none;
        text-align: center;
    }

    .txt-ali-center {
        text-align: center;
    }

    /*imagenes*/
    .img-left {
        width: 100%;
        max-width: 950px;
        max-height: 450px;
    }

    .img-prod {
        width: 100%;
        max-width: 250px;
        max-height: 150px;
    }

    .background-img {
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        position: relative;
        height: 350px;
    }

    .img-banner {
        height: 100%;
        max-height: 127px;
        background-color: black;
        opacity: 0.5;
        width: 100%;
        max-width: none;
        position: absolute;
        top: 0;
    }

    .cont-full .img-banner {
        height: 100%;
        max-height: 450px;
        background-color: black;
        opacity: 0.5;
        width: 100%;
        position: absolute;
        top: 0;
        max-width: none;
    }

    /*Botones*/

    /*listas*/
    .list-inf {
        list-style-image: url(img/ok.png);
        text-align: left;
    }
}
/*Seccion 3 de 1539px--->649px*/
@media only screen and (max-width:1539px ) {
    .cont-fst {
        width: 100%;
        height: auto;
        background-color: white;
        display: flex;
        flex-direction: column;
    }

    .cont-in-3l, .cont-in-3l div {
        width: 100%;
        transform: skewX(0deg);
        margin: 0;
    }

    .cont-in-3r, .cont-in-3r div {
        width: 100%;
        transform: skewX(0deg);
        margin: 0;
    }

    .cont-full .cont-flx-mb .cont-contain {
        display: flex;
        flex-direction: column;
        width: 100%;
        height: 100%;
        justify-content: center;
        align-items: center;
        max-width: inherit;
        min-height: 300px;
    }

    .cont-dvs {
        width: 33.3%;
    }

    .cont-hid p.txt-ali-center {
        margin: 0 3%;
    }

    #sec-indx-5 {
        width: 100%;
        height: auto;
        background-color: white;
        display: flex;
        flex-direction: column;
    }
}

@media only screen and (max-width:649px) {
    .cont-in-3r div .cont-flx {
        flex-direction: column;
    }

        .cont-in-3r div .cont-flx .cont-dvs {
            width: 100%;
            margin: 0 1.5%;
            padding: 0 5%;
            text-align: center;
        }

            .cont-in-3r div .cont-flx .cont-dvs p {
                text-align: center;
            }
}


/*745px mostrar contenido de los hover*/

@media only screen and (max-width: 744px) {
    .cont-hid p {
        opacity: 1;
        transform: translateY(0%);
    }

    .cont-hid h2 {
        transform: translateY(0%);
        transition: all 0.5s ease;
    }

    .cont-hid:hover h2 {
        transform: translateY(0%);
        cursor: pointer;
    }

    .cont-hid {
        transition: all 0.5s ease;
    }

        .cont-hid:hover {
            cursor: pointer;
            box-shadow: 1px 4px 22px grey;
            background-color: #ddeeff;
        }

    .cont-card-hid {
        position: unset;
    }

    .cont-card-hid:hover p {
        opacity: 1;
        transition: all 0.5s ease;
    }


    .cont-card-hid:hover h2 {
        opacity: 1;
        transition: all 0.5s ease;

    }

    .cont-card-hid p {
        opacity: 1;
        transition: all 0.5s ease;
        position:unset;

    }


        .cont-card-hid h2 {
            opacity: 1;
            transition: all 0.5s ease;
            position: unset;
        }

    .cont-flx-mb {
        position: relative;
        display: flex;
        width: 100%;
        justify-content: center;
        flex-direction: column;
        align-items: center;
    }

    .cont-dvs {
        width: 100%;
    }

    .cont-flx .cont-full .cont-flx { /*Estilos imagenes seccion 5*/
        position: relative;
        display: flex;
        width: 100%;
        justify-content: center;
        flex-direction: column;
    }

        .cont-flx .cont-full .cont-flx .cont-dvs { /*Estilos imagenes seccion 5*/
            width: 100%;
            background-size: cover;
            min-height: 333px;
        }

    /*Estilos imagenes seccion 6(IMAGENES)*/
    .cont-block-inv .cont-center .cont-column .cont-flx {
        position: relative;
        display: flex;
        width: 100%;
        justify-content: center;
        flex-direction: column;
    }

    .cont-block-inv .cont-left .cont-shadown {
        max-width: 800px;
        margin: 0 0px;
        z-index: 1;
        box-shadow: 7px 5px 23px grey;
    }


    /*Ajustar alto del slider principal*/
    .img-bkg-slide {
        position: relative;
        height: 350px;
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
    }

    /*Textos*/
    .txt-slid-tit {
        font-size: 20px;
        color: white;
        text-shadow: 2px 2px 3px black;
        text-align: center;
    }

    .txt-slid-quot {
        font-size: 15px;
        color: white;
        text-shadow: 2px 2px 3px black;
        text-align: center;
    }

    .txt-size-norm{
        font-size:15px;
    }
    .txt-title{
        font-size:20px;
    }

    .txt-img-title {
        font-size: 20px;
        color: white;
        text-shadow: 2px 2px 3px black;
    }

    .txt-img-quote {
        font-size: 15px;
        color: white;
        text-shadow: 2px 2px 3px black;
    }


}


@media only screen and (max-width: 1190px) {
    .cont-mult-img {
        flex-direction: column;
        width: 100%;
        height: 100%;
    }

        .cont-mult-img div {
            width: 100%;
            height: 250px;
            margin: 0% 2% 0% 2%;
            box-shadow: unset;
        }

    .cont-div-inf {
        flex-direction: column;
    }

        .cont-div-inf > div {
            height: 700px;
            width: 100%;
        }

    .cont-fa-inf {
        width: 100%;
        height: 100%;
        min-width: unset;
        max-width: unset;
    }

    .cont-div-inf-col > div {
        width: 100%;
        height: 350px;
    }

    .cont-flow-dir {
        flex-flow: column;
    }

    /* ------------ estilos unicos -------------*/

    div#col {
        display: flex;
        flex-flow: column;
    }
    div#col  >div{
        height:50%;
    }
    #cont-audit-l {
        width: 100%;
        height: 450px;
    }

    #cont-audit-r {
        width: 100%;
        height: 450px;
    }

        #cont-audit-r > div > div {
            width: 100%;
        }
    /*Estilos seccion 5 pagina auditoria*/
    .cont-div-inf > .cont-pic-zoom {
        height: 100%;
        width: 100%;
    }

        .cont-div-inf > .cont-pic-zoom > .cont-contain {
            max-width: unset;
        }

            .cont-div-inf > .cont-pic-zoom > .cont-contain > .cont-contain {
                max-width: unset;
            }

            .cont-div-inf > .cont-pic-zoom > .cont-contain > .cont-hid:hover {
                background-color: unset;
            }
}